<template>
  <div class="list">
    <div class="card">
      <!-- 单个购物车头部 -->
      <div class="top">
        <!-- <van-checkbox checked-color="red" v-model="checked" icon-size="18px" style="font-weight:bold" @click="allCheck(isAllSelect)">99元包邮</van-checkbox> -->
        <div class="right">
          <span style="color:gray">已满99元包邮</span>
          <span style="color:red;margin-left:8px">去逛逛<van-icon name="arrow" /></span>
        </div>
      </div>
      <!-- 购物车列表 -->
      <div class="shoplist" v-for="(shop, index) in shopCartList" :key="shop.id">
        <van-checkbox checked-color="red" v-model="shop.isChecked" @click="checkOneCart(shop.skuId, shop.isChecked)"
          icon-size="18px"></van-checkbox>
        <van-swipe-cell style="width:315px">
          <van-card :price="shop.skuPrice" :title="shop.skuName" class="goods-card" :thumb="shop.imgUrl">
            <template #bottom>
              <!-- 步进器 -->
              <van-stepper v-model="shop.skuNum" theme="round" button-size="22" disable-input style="float:right"
                @change="changeNum(shop, $event)" />
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteOneCart(shop.skuId, index)" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
  <!-- 结算 -->
  <van-submit-bar :price="totalPrice * 100" button-text="结算" @submit="onSubmit">
    <van-checkbox v-model="isAllSelect" checked-color="red" @click="allCheck(isAllSelect)">全选</van-checkbox>
    <template #tip>
      你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
    </template>
  </van-submit-bar>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { reqAddToCart } from '../../api/shopcart/cart';
export default defineComponent({
  name: 'ShopCart',
})
</script>

<script lang="ts" setup>
import { showToast } from 'vant';
import { onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useShopCartStore } from '../../stores/shopcart'
import { storeToRefs } from 'pinia';
const router = useRouter()
const onSubmit = () => {
  router.push('Order')
}
const onClickLink = () => showToast('修改地址');
// const checked = ref(true);


// 赋值
const shopCartStore = useShopCartStore()
// 从store中拿到数据
const { shopCartList } = storeToRefs(shopCartStore)
onMounted(() => {
  shopCartStore.asyncShopCartList()
})

// 更新单个cart的状态
const checkOneCart = (id: number, checked: number) => {
  let isChecked = checked ? 1 : 0
  shopCartStore.asyncCheckOne(id, isChecked)
}

// 计算全选
const isAllSelect = computed(() => {
  // every每一项，只要每一项的isChecked都是1，就返回true
  return shopCartList.value.every((item) => item.isChecked)
})

// 全选全不选
const allCheck = (isAllSelect: any) => {
  shopCartList.value.forEach(item => {
    if (item.isChecked === isAllSelect) {
      item.isChecked = isAllSelect ? 1 : 0
    } else {
      item.isChecked = isAllSelect ? 0 : 1
    }
  })
  let isAll = isAllSelect === true ? 1 : 0
  let skuIdList = shopCartList.value.map((item: any) => {
    item.skuId
  })
  shopCartStore.asyncBatchCheckAllCart(isAll, skuIdList)
}

// 删除
const deleteOneCart = (skuId: number, index: number) => {
  shopCartList.value.splice(index, 1)
  shopCartStore.asyncDeleteOneCart(skuId)
}

// 计算数量
const changeNum = async (shop: any, event: any) => {
  const { skuId } = shop
  await reqAddToCart(skuId, event)
}

// 计算总价
const totalPrice = computed(() => {
  return shopCartList.value.reduce((total, item) => {
    if (item.isChecked) {
      return total + item.skuNum * item.skuPrice
    } else {
      return total
    }
  }, 0)
})
</script>

<style scoped>
.list {
  max-height: 999999px;
}

.list .card {
  margin: 10px;
  background-color: lightgray;
  height: 200px;
  border-radius: 10px
}

.list .card .top {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
  margin: 0 10px
}

.list .card .top .right {
  font-size: 10px
}

.list .card .shoplist {
  display: flex;
  justify-content: space-between;
  margin: 0 10px
}

.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.van-submit-bar {
  margin-bottom: 51px;
}
</style>